<template>
    <div class="row">
        <div class="col-sm-5">
            <div class="dataTables_info" role="status" aria-live="polite">
                共{{pager.totalCount}}条信息
            </div>
        </div>
        <div class="col-sm-7">
            <div class="dataTables_paginate paging_simple_numbers" >
                <ul class="pagination" style="margin: 0px 0;">
                    <li v-if="pager.pageIndex<=1" class="disabled">
                        <a href="javascript:;">
                            首页
                        </a>
                    </li>
                    <li v-if="pager.pageIndex>1">
                        <a href="javascript:;" v-on:click="JumpPage(1,$event)">
                            首页
                        </a>
                    </li>
                    <li v-if="pager.pageIndex>1" class="paginate_button previous">
                        <a href="javascript:;" v-on:click="JumpPage(pager.pageIndex-1,$event)">
                            <i class="ace-icon fa fa-angle-double-left"></i>
                        </a>
                    </li>
                    <li v-if="pager.pageIndex<=1" class="paginate_button previous disabled">
                        <a href="javascript:;">
                            <i class="ace-icon fa fa-angle-double-left"></i>
                        </a>
                    </li>
                    <li v-if="pager.pageIndex>3">
                        <a href="javascript:;" v-on:click="JumpPage(1,$event)">...</a>
                    </li>
                    <li v-for="index in pager.pageNumber" :class="index == pager.pageIndex?'active':''">
                    <!-- :class="active(index)" -->
                        <a href="javascript:;" v-on:click="JumpPage(index,$event)">{{index}}</a>
                    </li>
                    <li v-if="pager.pageCount-pager.pageIndex>2">
                        <a href="javascript:;" v-on:click="JumpPage(pager.pageCount,$event)">...</a>
                    </li>
                    <li v-if="pager.pageIndex!=pager.pageCount&&pager.pageCount!=0" class="paginate_button next">
                        <a href="javascript:;" v-on:click="JumpPage(pager.pageIndex+1,$event)">
                            <i class="ace-icon fa fa-angle-double-right">
                            </i>
                        </a>
                    </li>
                    <li v-if="pager.pageIndex==pager.pageCount||pager.pageCount==0" class="paginate_button next disabled">
                        <a href="javascript:;">
                            <i class="ace-icon fa fa-angle-double-right">
                            </i>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  props: {
    pager: {
      type: Object,
      default: function() {
        return {
          pageIndex: 1,
          pageSize: 10,
          pageCount: 0,
          totalCount: 0,
          pageNumber: []
        };
      }
    }
  },
  data: function() {
    return {
      pager: this.pager
    };
  },
  methods: {
    JumpPage: function(pageIndex, e) {
      if (this.pager.pageIndex == pageIndex) return;
      this.$emit("pagechange", pageIndex, e);
    }
  }
};
</script>